<template>
	<view class="search__page">
		<view class="search_group">
			<input @confirm="searchBtnClickHandler" confirm-type="search" :focus="inputFocus" v-model="kw" class="search-input__item" type="text" value="" placeholder="请输入相关的关键词" />
			<view class="search-btn__item" @click="searchBtnClickHandler"></view>
		</view>

		<template v-for="(temp, index) in result">
			<QShowCard :nowQ="temp" checked="-1" :key="index"></QShowCard>
		</template>

		<template v-if="result.length==0">
			<image @touchstart="asrStart" class="search-talk__item" src="../../static/home-talk.png" mode=""></image>
			<view class="nomore-tip__item">没有搜到相关内容</view>
			<wx-arsm ref="weixinAsr" @callback="asrResult"></wx-arsm>
		</template>

	</view>
</template>

<script>
	import wxArsm from '../../components/wxASRM/wxASRM.vue'
	// console.log(wxArsm)
	export default {
		components: {
			wxArsm
		},
		data() {
			return {
				inputFocus: false,
				kw: '',
				result: []
			};
		},
		onLoad(option) {
			if (option.miva) {
				this.asrStart();
			} else {
				this.inputFocus = true
			}
		},
		destroyed() {
			this.$refs.weixinAsr.recordStop()
		},
		methods: {
			// 语音识别
			asrStart() {
				this.$refs.weixinAsr.show();
			},
			asrResult(res) {
				console.log(res)
				this.kw = res;
				// this.arsRes = res;
			},
			async searchBtnClickHandler() {
				uni.showLoading({
					title:'搜索中...',
					mask:true
				})
				const [err, result] = await this.$https({
					url: '/wechat/searchtestbykey',
					method: "POST",
					data: {
						key: this.kw,
						page: 1
					}
				})
				uni.hideLoading()
				console.log(err, result)
				console.log(result.data.data)
				if (result.statusCode == 500) {
					uni.switchTab({
						url: '/pages/wode/wode',
						fail: (err) => {
							console.log(err)
						}
					})
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
				this.result = result.data.data
			}
		}
	}
</script>

<style lang="scss">
	.search__page {
		background-color: #F1F1F1;

		.search_group {
			width: 100vw;
			height: calc(100vw / (506 / 75));
			position: relative;
			background-image: url(../../static/search__item.png);
			background-size: cover;
		}

		.search-input__item {
			position: absolute;
			top: 50%;
			left: 15vw;
			transform: translateY(-55%);
		}

		.search-btn__item {
			width: 25vw;
			height: 100%;
			float: right;
		}

		.search-talk__item {
			width: 50vw;
			height: calc(50vw / (232 / 218));
			position: fixed;
			bottom: 50px;
			left: 50%;
			z-index: 748943649;
			transform: translateX(-50%);
		}

		.nomore-tip__item {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			font-size: 12px;
			color: #666;
		}
	}
</style>
